<template>
    <!-- <div>{{ name }}</div>
    <div>{{ age }}</div> -->

    <!-- <h1>{{ web.type }}</h1>
    <h1>{{ web.money }}</h1> -->
    <h1>{{ person.obj.type  }}</h1>
    <h1>{{ person.obj.money }}</h1>
    <h1 v-if="person.sex">{{ person.sex }}</h1>
    <h1 v-if="person.like">{{ person.like }}</h1>
    <h1 v-if="person.arr">{{ person.arr }}</h1>
    <button @click="change">改变</button>
</template>

<script >
// 1 三个组件 通过输入框事件进行切换

// 先导入子组件, 然后再注册子组件  最后  使用
import SearchResult from "./components/jieguo.vue";
import SearchSuggestion from "./components/jianyi.vue";
import SearchHistory from "./components/lishi.vue";


import { ref, reactive } from "vue";


export default {
    setup() {

        var person = reactive({
            name: '张三',
            age: 18,
            obj: {
                type: '前端工程师',
                money: '30k',
                a: {
                    b: {
                        c: 999
                    }
                }
            },
            arr: ['抽烟', '喝酒', '烫头']
        })

        /*     var name = ref('zhang-san'),
                 age = ref(18),
                 web = ref({
                     type: '前端工程师',
                     money: '30k'
                 }) 
     */

        function change(p) {
            // name.value = 'lisi666'
            // age.value = 88
            // console.log(name,age);
            // web.value.type = '后端'
            debugger
            for(var i=0;i<5;i++){
                console.log("我是循环",i)
            }
            person.obj.type = '后端'
            person.obj.money = '100k'
            person.sex = '女'
            person.like = '篮球'
            person.arr[0] = '王者'
            // delete person.arr
            console.log(person);


        }
        return {
            // name,
            // age,
            // web,
            change,
            person
        }
    }

}
</script>

<style></style>